<template>
  <div id="order_info">
    <div class="order_info_tittle">
      <el-page-header @back="$router.go(-1)" content="详情页面">
      </el-page-header>
    </div>
    <!-- 主题内容 -->
    <div class="wrapper order_info_main">
      <div class="order_steps">
        <el-steps :active="active" finish-status="success">
          <el-step title="发布成功"></el-step>
          <el-step title="预约成功"></el-step>
          <el-step title="进行中"></el-step>
          <el-step title="已完成"></el-step>
          <el-step title="待评价"></el-step>
          <el-step title="完成评价"></el-step>
        </el-steps>
      </div>
      <div class="mian_content">
        <div class="order-info">
          <p class="info">
            <span class="info-text">订单编号：{{ getOrderId }}</span>
            <span class="info-text">订单创建时间：{{ orderInfo.create_time }}</span>
            <span class="info-text">接单时间：{{ orderInfo.take_time || '暂未接单' }}</span>
            <span class="info-text">订单完成时间：{{ orderInfo.done_time || '暂未完成' }}</span>
          </p>
          <div class="server">
            <div class="pic">
              <img :src="orderInfo.service_img" alt="">
            </div>
            <div class="server-info">
              <div class="row title">
                <div class="row-item"><span>维修服务：</span>{{ orderInfo.service_name }}</div>
                <div class="row-item"><span>电器类型：</span>{{ orderInfo.service_name }}</div>
                <div class="row-item"><span>故障描述：</span>{{ orderInfo.failure }}</div>
              </div>
              <div class="row maintianer">
                <div class="row-item"><span>维修人员：</span>
                  {{ orderInfo.maintainer_id ? orderInfo.maintainer_nickname :'暂未被接单' }}</div>
                <div class="row-item"><span>工号：</span>
                  {{ orderInfo.maintainer_id ? orderInfo.maintainer_id : '暂未被接单' }}</div>
                <div class="row-item"><span>联系方式：</span>
                  {{ orderInfo.maintainer_id ? orderInfo.maintainer_phone : '暂未被接单' }}</div>
              </div>
              <div class=" row linkman">
                <div class="row-item"><span>联系人：</span>{{ orderInfo.linkman }}</div>
                <div class="row-item"><span>联系方式：</span>{{ orderInfo.phone }}</div>
                <div class="row-item"><span>地址：</span>
                  {{ orderInfo.districts + ' ' + orderInfo.city + ' '
                  + orderInfo.county + ' ' + orderInfo.full_address }}
                </div>
                <div class="row-item"><span>预约时间：</span>
                  {{ orderInfo.appointmentDate +' ' + orderInfo.startTime + ' - '+ orderInfo.endTime }}
                </div>
                <div class="row-item"><span>备注：</span>{{ orderInfo.remark || '' }}</div>
              </div>
              <div class="row pice">
                <div class="row-item">基础维修费用：<span>￥{{ orderInfo.service_pice }}</span></div>
                <div class="row-item">材料费：<span>￥0</span></div>
                <div class="row-item">其他费用：<span>￥0</span></div>
                <div class="totle">
                  <span><i>合计：</i>￥{{ orderInfo.service_pice }}</span>
                  <el-button @click="dialogVisible = true" type="danger" size="medium"
                    v-if="orderInfo.order_status === '4'">支付订单
                  </el-button>
                  <div class="done" v-if="orderInfo.order_status === '5' || orderInfo.order_status === '6'">
                    <el-button disabled type="success" size="medium">已支付订单
                    </el-button>
                    <el-button size="medium" type="danger" :disabled="orderInfo.order_status === '6'"
                      @click="dialog = true">评价订单
                    </el-button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="dialog">
      <el-dialog title="支付订单" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
        <div class="pay" v-loading="loading" v-if="!paySuccess">
          <el-select v-model="pay_type" placeholder="请选择支付方式">
            <el-option label="支付宝" value="1"></el-option>
            <el-option label="微信" value="2"></el-option>
          </el-select>
          <div class="pay_img">
            <img src="../../../assets/支付宝.jpg" alt="" v-if="pay_type === '1'">
            <img src="../../../assets/vx.jpg" alt="" v-if="pay_type === '2'">
          </div>
          <el-button type="danger" @click="donePay" :disabled="!pay_type" size="medium">完成支付</el-button>
        </div>
        <el-result icon="success" title="支付成功" subTitle="请根据提示进行操作" v-else>
          <template slot="extra">
            <el-button type="primary" size="medium" @click="dialogVisible = false">返回</el-button>
          </template>
        </el-result>
      </el-dialog>
      <!-- -------评价订单----- -->
      <el-dialog title="评价订单" :visible.sync="dialog" width="30%" :before-close="handleClose">
        <div class="pay" v-loading="loading_eva" v-if="!appraiseSuccess">
          <div class="rate">
            <el-tag type="success">给师傅评分吧！</el-tag>
            <el-rate v-model="value" show-score text-color="#ff9900" score-template="{value}">
            </el-rate>
          </div>
          <el-button type="danger" @click="evaluateOrder" size="medium">评 价</el-button>
        </div>
        <el-result icon="success" title="评价成功" subTitle="请根据提示进行操作" v-else>
          <template slot="extra">
            <el-button type="primary" size="medium" @click="dialog = false">返回</el-button>
          </template>
        </el-result>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getOrderDetailService, evaluateOrderService, payOrderService } from '@/api/order'
export default {
  data () {
    return {
      active: 1,
      orderInfo: {},
      dialogVisible: false,
      pay_type: '',
      loading: false,
      paySuccess: false,
      dialog: false,
      value: 5,
      appraiseSuccess: false,
      loading_eva: false
    }
  },
  async created () {
    this.getOrderDetail()
  },
  methods: {
    async getOrderDetail () {
      const res = await getOrderDetailService(this.getOrderId)
      // console.log(res.data)
      this.orderInfo = res.data
      this.active = +res.data.order_status
    },
    handleClose (done) {
      done()
    },
    async donePay () {
      const res = await payOrderService({ id: this.getOrderId, order_status: 5 })
      if (res.status === 0) {
        this.loading = true
        await setTimeout(() => {
          this.loading = false
          this.$message({
            type: 'success',
            message: '支付成功'
          })
          this.paySuccess = true
        }, 500)
      }
      this.getOrderDetail()
    },
    async evaluateOrder () {
      const res = await evaluateOrderService({ id: this.getOrderId, score: this.value, order_status: 6 })
      if (res.status === 0) {
        this.loading_eva = true
        await setTimeout(() => {
          this.loading_eva = false
          this.$message({
            type: 'success',
            message: '评价成功'
          })
          this.appraiseSuccess = true
        }, 500)
      }
      this.getOrderDetail()
    }
  },
  // 计算属性
  computed: {
    getOrderId () {
      return this.$route.query.id
    }
  },
  components: {
    // MyCascaderVue
  }
}
</script>

<style lang="less" scoped>
.order_info_main{
  background-color: #fff;
  .order_steps{
    width: 80%;
    margin: 20px auto;
  }
  .mian_content{
    padding: 30px;
    .order-info{
      border-top: 1px solid #ccc;
      .info{
        display: flex;
        justify-content: space-around;
        align-items: center;
        font-size: 14px;
        color: #999;
      .info-text{
        display: inline-block;
      }
      }
      .server{
      display: flex;
      margin-top: 30px;
      // background: #41A002;
      .pic{
        box-sizing: border-box;
        width: 200px;
        height: 200px;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .row{
        margin: 0 15px;
        padding: 30px 15px;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        // justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #ccc;
        color: #555;
        .row-item{
          flex: 1;
          width: calc((100%) / 3);
          min-width: calc((100%) / 3);
          max-width: calc((100%) / 3);
          // margin-right: 30px;
          font-size: 16px;
          line-height: 40px;
          height: 40px;
          color: #000;
          span{
            font-weight: bold;
            // color: #E43D30;
          }
          }
        }
      }
      .maintainer-info{
        .title{
          font-size: 18px;
          font-weight: 700;
        }
      }
      }
      .title{
        .row-item{
                  flex: 1;
                }
      }
      .maintianer{
        .row-item{
                  flex: 1;
                }
      }
      .linkman{
        flex-wrap: wrap;
      }
      .pice{
          .row-item{
            font-weight: bold;
              span{
                font-size: 22px;
                color: #E43D30;
              }
          }
          .totle{
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 20px;
            color: #E43D30;
            font-weight: bold;
            height: 50px;
            line-height: 50px;
            span{
              font-size: 28px;
              color: #E43D30;
              i{
                font-size: 18px;
              }
            }
          }
        }
      }
}
.dialog{
        .pay{
          text-align: center;
          .rate{
            margin: 20px auto;
            /deep/.el-rate{
              margin: 10px;
            }
          }
          .pay_img{
            margin: 20px auto;
            width: 220px;
            img{
              width: 100%;
              height: 100%;
            }
          }
        }
      }

</style>
